<template>
  <div class="grid">
    <div class="col-12">
      <!-- 头部导航栏 -->
      <el-container class="home-container animated fadeIn">
        <HeaderNavsBar style="margin-top: 10px"> </HeaderNavsBar>
        <el-main class="home-banner animated zoomIn">
          <div class="blog-title">
            <h1>分类详细</h1>
          </div>
        </el-main>
      </el-container>
    </div>

    <el-container class="animated fadeInUp">
      <el-main>
        <!-- 文章信息展示 -->
        <el-row :gutter="20">
          <el-col :span="10" :offset="7">
            <div>
              <div class="content-header header-shadow">
                <div class="content-header-left">
                  <h3 class="header-title">分类</h3>
                </div>
                <div class="content-header-right">
                  <!-- 获取总共的篇数 -->
                  共
                  <h2 class="total_number">
                    {{ classifyTotal }}
                  </h2>
                  个
                </div>
                <el-skeleton :rows="2" />
              </div>
            </div>

            <div class="classify-box">
              <!-- 每个分类按钮 -->
              <div
                @click="findClassifyArticle(classify)"
                class="classify-btn"
                v-for="(classify, index) in classifyItems"
                :key="index"
              >
                <!-- 名称 -->
                <a
                  class="classifyName"
                  @click="updateClassifyBtnStyle(classify.classifyId)"
                  :class="
                    isActive === classify.classifyId ? 'click-classify-btn' : ''
                  "
                  >{{ classify.classifyName }}</a
                >
                <!-- 当前分类的数量 -->
                <div
                  class="classifyCount"
                  :class="
                    isActive === classify.classifyId ? 'click-classify-btn' : ''
                  "
                >
                  {{ classify.classifyCount }}
                </div>
              </div>
            </div>
            <!-- 文章头部 -->
            <div class="content-header header-shadow">
              <div class="content-header-left">
                <h3 class="header-title">博客</h3>
              </div>
              <div class="content-header-right">
                <!-- 获取总共的篇数 -->
                共
                <h2 class="total_number">
                  {{ total_number === 0 ? articleTotal : total_number }}
                </h2>
                篇
              </div>
            </div>
            <!-- 文章信息展示 -->
            <ArticleCard
              class="content-main my-shadow"
              v-for="article in articleListByClassify"
              :key="article.articleId"
              :parentArticle="article"
            ></ArticleCard>
            <div class="paging my-shadow">
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2, 6, 10, 15]"
                :page-size="pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total_number === 0 ? articleTotal : total_number"
              >
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </el-main>
      <!-- 底部 -->
      <el-footer>
        <IndexFooter></IndexFooter>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import BlogCommonApi from "@/api/BlogCommonApi";
import HeaderNavsBar from "@/components/tools/HeaderNavsBar.vue";
import IndexFooter from "@/components/layout/IndexFooter.vue";
import ArticleCard from "@/components/layout/ArticleCard.vue";
const blogCommonApi = new BlogCommonApi();
export default {
  components: { IndexFooter, HeaderNavsBar, ArticleCard },
  data() {
    return {
      classifyItems: [],
      isActive: "",
      articleListByClassify: [],
      clickClassify: {},
      currentPage: 1, // 当前页码
      pageSize: 6, // 每页的显示数据条数
      // 文章列表头部数据信息
      total_number: 0, // 总条数
      loading: true,
    };
  },
  methods: {
    updateClassifyBtnStyle(index) {
      this.isActive = index;
    },
    // 查找当前分类的文章信息
    findClassifyArticle(classify) {
      this.currentPage = 1;
      let data = {
        classifyId: classify.classifyId,
        classifyName: classify.classifyName,
        offset: 0,
        limit: 6,
      };
      blogCommonApi.getArticleListByClassifyId(data).then((res) => {
        if (res.code === 0) {
          this.articleListByClassify = res.data;
          this.total_number = classify.classifyCount;
          this.clickClassify = classify;
        }
        if (res.code === 50000) {
          this.$message({
            type: "error",
            message: "当前分类没有文章信息,你要去成为它的第一个文章作者吗?",
          });
        }
      });
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      let data = {
        offset: (this.currentPage - 1) * this.pageSize,
        limit: this.pageSize,
      };
      // 如果total_number 不等于0 说明现在需要查询的是分类的分页信息
      if (this.total_number !== 0) {
        data = {
          classifyId: this.clickClassify.classifyId,
          classifyName: this.clickClassify.classifyName,
          offset: (this.currentPage - 1) * this.pageSize,
          limit: this.pageSize,
        };
        blogCommonApi.getArticleListByClassifyId(data).then((res) => {
          if (res.code === 0) {
            this.articleListByClassify = res.data;
          }
        });
        return;
      }
      // 不是则直接获取文章信息
      blogCommonApi.getArticleList(data).then((res) => {
        this.articleListByClassify = res.data;
      });
    },
  },
  computed: {
    classifyTotal() {
      return this.$store.state.classifyCount;
    },
    articleTotal() {
      return this.$store.state.articleCount;
    },
  },
  mounted() {
    // 获取分类信息表
    blogCommonApi.getClassifyList().then((res) => {
      this.classifyItems = res.data;
    });
    this.loading = false;
  },
  // 从IndexMainRightCard 接收 路由转跳过来的时候如果有id则直接根据id查询分类信息
  created() {
    if (this.$route.query.id !== undefined) {
      const id = this.$route.query.id;
      const name = this.$route.query.name;
      const count = this.$route.query.count;
      this.$nextTick(() => {
        this.isActive = parseInt(this.$route.query.id);
      });
      // 封装的data => api数据
      let data = {
        classifyId: id,
        classifyName: name,
        offset: 0,
        limit: 6,
      };
      //封装的用户点击的分类信息 ==> showArticle组件使用
      let classify = {
        classifyId: id,
        classifyName: name,
        classifyCount: count,
      };

      blogCommonApi.getArticleListByClassifyId(data).then((res) => {
        if (res.code === 0) {
          this.articleListByClassify = res.data;
          this.clickClassify = classify;
          this.total_number = parseInt(count);
        }
        if (res.code === 50000) {
          this.$message({
            type: "error",
            message: "当前分类没有文章信息,你要去成为它的第一个文章作者吗?",
          });
          blogCommonApi.getArticleList(data).then((res) => {
            this.articleListByClassify = res.data;
          });
        }
      });
    } else {
      let data = {
        limit: 6,
        offset: 0,
      };
      // 如果点击的是more 则直接查询所有的文章  ==> 传递给 showArticle
      blogCommonApi.getArticleList(data).then((res) => {
        this.articleListByClassify = res.data;
      });
    }
  },
};
</script>

<style scoped lang="scss">
.home-container {
  width: 100%;
  height: 69vh;
  background: url("https://map-zblog.oss-cn-guangzhou.aliyuncs.com/backgroundImg/classifyPsc.jpg")
    no-repeat 50% / cover fixed;
}

.classify-box {
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  padding: 28px 14px;
  border: 1px solid rgba(34, 36, 38, 0.15);
  margin-top: -1px;
  background-color: #fff;

  border-radius: 0.3125em;
  .classify-btn {
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 5px;
    margin-right: 5px;
    color: rgba(0, 0, 0, 0.6);
    .classifyName {
      display: inline-block;
      padding: 8px 22px;
      border: 1px solid rgba(34, 36, 38, 0.15);
      border-radius: 4px;
      border-right: none;
      color: rgba(0, 0, 0, 0.6);
    }
    .classifyName:hover {
      border: 1px solid rgba(34, 36, 38, 0.35);
      border-right: none;
      transition: all 0.3s;
    }
    .classifyCount {
      display: inline-block;
      position: relative;
      font-weight: 700;
      padding: 9px 14px;
      border: 1px solid rgba(34, 36, 38, 0.15);
      font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
      color: rgba(0, 0, 0, 0.87);
      border-radius: 4px;
    }
    .classifyCount::before {
      position: absolute;
      content: "";
      top: 13px;
      left: -6px;
      width: 0.6666em;
      height: 0.6666em;
      border-style: inherit;
      border-color: inherit;
      border-width: 0 0 1px 1px;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      background-color: #fff;
      background-image: none;
      z-index: 2;
      -webkit-transition: background 0.1s ease;
      transition: background 0.1s ease;
    }
  }
}
.classify-box:hover {
  box-shadow: 0px 1.7px 5.3px rgba(0, 0, 0, 0.039),
    0px 5.6px 17.9px rgba(0, 0, 0, 0.055), 0px 25px 80px rgba(0, 0, 0, 0.09);
  transition: all 0.3s;
}

.click-classify-btn {
  color: #2185d0 !important;
  border-color: #2185d0 !important;
}
.paging {
  text-align: center;
  padding: 10px;
  border-radius: 0 0 0.28571429rem 0.28571429rem;
  border: 1px solid #d4d4d5;
}
</style>
